<template>
    <div class="page-container">
        <Example title="虚拟滚动">
            <Scroller :viewH="330" :itemH="50" :data="data">
                <div slot-scope="{item}" class="item">
                    {{item.content}}
                </div>
            </Scroller>
        </Example>

        <Example title="不虚拟滚动">
            <div style="height :330px;overflow-y:scroll;">
                <div v-for="item in data" :key="item.id" class="item">
                    {{ item.content }}
                </div>
            </div>
        </Example>
    </div>
</template>

<script>
import Scroller from "./components/scroller";

export default {
    components: { Scroller },
    data() {
        return {
            data: []
        };
    },
    methods: {
        initData() {
            const list = [];
            for (let index = 0; index < 1000; index++) {
                list.push({content: '纪念辛亥革命110周年大会9日上午在北京人民大会堂隆重举行。习近平出席大会并发表重要讲话。 特别声明:以上内容(如有图片或视...'});
            }
            this.data = list;
        }
    },
    created() {
        this.initData();
    }
};
</script>

<style lang="less" scoped>

.item {
    height: 50px;
    background-color: #eee;
    margin-bottom: 1px;
}
</style>
